/**
 * @AUTHOR soft
 * @DATE 2018/10/9 22:27
 * @DESCRIBE vue bootstrap 分页组件
 */
Vue.component('navigation', {
  template: '<nav aria-label="Page navigation">'+
      '<ul class="pagination">'+
      '<li :class="{\'disabled\':curPage==1}">'+
      '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
      '<i class="cd-icon cd-icon-first-page"></i>'+
      '</a>'+
      '</li>'+
      '<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+
      '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
      '<a href="javascript:;" v-else>···</a>'+
      '</li>'+
      '<li :class="{\'disabled\':curPage==pages}">'+
      '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
      '<i class="cd-icon cd-icon-last-page"></i>'+
      '</a>'+
      '</li>'+
      /*'<li :class="{\'disabled\':pages==pages}">'+
      '<a href="javascript:void(0);">'+
      '共  {{pages}} 页'+
      '</a>'+
      '</li>'+*/
      '</ul>'+
      '</nav>',
  // 用户组件传递数据
  props: {
    pages: {
      type: Number,
      default: 1
    },
    current: {
      type: Number,
      default: 1
    }
  },
  data:function () {
    return {
      curPage: this.current
    }
  },
  computed: {
    // 显示分页按钮
    showPageBtn0:function() {
      var pageNum = this.pages; // 总页数
      var index = this.curPage; // 当前页
      var arr = [];
      if (pageNum <= 6) {
        for (var i = 1; i <= pageNum; i++) {
          arr.push(i)
        }
        return arr
      }
      // 对页码显示进行处理，动态展示
      if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
      if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
      if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
      if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
      return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
    },
    showPageBtn: function() {
      var pageNum = this.pages;
      var index = this.curPage;
      var arr = [];
      if (pageNum <= 5) {
        for (var i = 1; i <= pageNum; i++) {
          arr.push(i)
        }
        return arr
      }
      if (index <= 2) return [1, 2, 3, 0, pageNum];
      if (index >= pageNum - 1) return [1, 0, pageNum - 2, pageNum - 1, pageNum];
      if (index === 3) return [1, 2, 3, 4, 0, pageNum];
      if (index === pageNum - 2) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
      return [1, 0, index - 1, index, index + 1, 0, pageNum];
    }
  },
  methods: {
    goPage:function(page) {
      if (page != this.curPage) {
        this.curPage = page;
        this.$emit('update:current', this.curPage);
        this.$emit('navpage', this.curPage);
      } else {
        console.log('Already in the current page');
      }
    }
  }
}); // 注册组件
